import { Button, Divider, Input, Modal, Space, Steps, Switch } from 'antd';
import { useState, useEffect, useContext, useMemo, forwardRef, useImperativeHandle } from 'react';
import dayjs from 'dayjs'
import MapLogic from './MapLogic';
import html2canvas from 'html2canvas';
import BusinessMap from '../../../../../../../common/BusinessMap';

window.html2canvas = html2canvas;

const MapGenerator = forwardRef((props, ref) => {
    const [mapInfo, setMapInfo] = useState({
        author: '制图管理员',
        enableAuthor: true,
        team: '',
        enableTeam: true,
        date: dayjs().format('YYYY-MM-DD'),
        enableDate: true,
        enableCompass: true,
        enableScale: true
    })

    useImperativeHandle(ref, () => {
        return {
            loadData: () => {
                return new Promise((resolve) => {
                    html2canvas(document.getElementById(mapId)).then(canvas => {
                        const result = canvas.toDataURL("image/jpeg")
                        // console.log(result)
                        resolve({ img: result })
                    });
                })
            }
        }
    })

    const mapId = useMemo(() => {
        return `map-${Math.random().toString().substring(3)}`
    }, [])

    return <div className='layout-h fill' style={{
        marginTop: 20,
    }}>
        <div style={{
            width: 200,
            padding: "0 12px"
        }}>
            <Space direction="vertical">
                <div>制图人员</div>
                <Space>
                    <Input value={mapInfo.author} onChange={e => {
                        setMapInfo(item => {
                            return {
                                ...item,
                                author: e.target.value
                            }
                        })
                    }} />
                    <Switch checked={mapInfo.enableAuthor} onChange={checked => {
                        setMapInfo(item => {
                            return {
                                ...item,
                                enableAuthor: checked
                            }
                        })
                    }} />
                </Space>
                <div>制图单位</div>
                <Space>
                    <Input value={mapInfo.team} onChange={e => {
                        setMapInfo(item => {
                            return {
                                ...item,
                                team: e.target.value
                            }
                        })
                    }} />
                    <Switch checked={mapInfo.enableTeam} onChange={checked => {
                        setMapInfo(item => {
                            return {
                                ...item,
                                enableTeam: checked
                            }
                        })
                    }} />
                </Space>
                <div>制图时间</div>
                <Space>
                    <Input value={mapInfo.date} onChange={e => {
                        setMapInfo(item => {
                            return {
                                ...item,
                                date: e.target.value
                            }
                        })
                    }} />
                    <Switch checked={mapInfo.enableDate} onChange={checked => {
                        setMapInfo(item => {
                            return {
                                ...item,
                                enableDate: checked
                            }
                        })
                    }} />
                </Space>
                <Divider style={{
                    borderColor: "#fff",
                    margin: "12px 0"
                }} />
                <Space>
                    <div>指北针</div>
                    <Switch checked={mapInfo.enableCompass} onChange={checked => {
                        setMapInfo(item => {
                            return {
                                ...item,
                                enableCompass: checked
                            }
                        })
                    }} />
                </Space>
                <Space>
                    <div>比例尺</div>
                    <Switch checked={mapInfo.enableScale} onChange={checked => {
                        setMapInfo(item => {
                            return {
                                ...item,
                                enableScale: checked
                            }
                        })
                    }} />
                </Space>
            </Space>
        </div>
        <div id={mapId} className='fill layout-v' style={{
            border: "1px solid #17e6ffb3",
            borderRadius: 8,
            background: "#fff",
            padding: 12
        }}>
            <div className="fill relative" style={{
                border: "1px solid #333"
            }}>
                <BusinessMap autoFit={false}>
                    <MapLogic mapInfo={mapInfo} {...props} />
                </BusinessMap>
            </div>
            <div className='layout-h' style={{
                justifyContent: "end",
                color: "#333",
                paddingTop: 12
            }}>
                {mapInfo.enableAuthor && <Space>
                    <div>制图人员：</div>
                    <div>{mapInfo.author || '-'}</div>
                </Space>}
                {mapInfo.enableTeam && <Space style={{
                    marginLeft: 30
                }}>
                    <div>制图单位：</div>
                    <div>{mapInfo.team || '-'}</div>
                </Space>}
                {mapInfo.enableDate && <Space style={{
                    marginLeft: 30
                }}>
                    <div>制图时间：</div>
                    <div>{mapInfo.date || '-'}</div>
                </Space>}
            </div>
        </div>
    </div>
})

export default MapGenerator;